<template>
	<view class="main-page">
		<view class="header-box">
			<text class="width-112 font-999-26 font-center">类型</text>
			<text class="width-215 font-999-26 font-center">设备/人员</text>
			<text class="header-item-grow font-999-26">编辑</text>
			<text class="header-item-grow font-999-26">使用状态</text>
			<text class="width-156 font-999-26"
			 style="text-align: right;padding-right: 30rpx;">排序</text>
		</view>
		
		<view class="column-container width-100p" v-show="bedList.length > 0">
			<view class="bed-item" v-for="(item , index) in bedList" :key="index">
				<text class="width-112 font-999-26 font-center" v-if="item.type == 1">设备</text>
				<text class="width-112 font-999-26 font-center" v-else>店员</text>
				<text class="width-215 font-333-28 font-weight-600 font-center font-line-2">{{item.name}}</text>
				<view class="row-container-center header-item-grow" @click="clickEditItem(item)">
					<image class="wh-44" src="../../static/common/ic_edit_black.png"></image>
				</view>
				<view class="row-container-center header-item-grow" @click="handleClickIsOpen(item)">
					<image class="switch-ic" v-if="item.status == 0"
					 src="../../static/common/ic_switch_open.png"></image>
					<image class="switch-ic" v-else
					 src="../../static/common/ic_switch_close.png"></image>
				</view>
				<view class="row-container-end width-156" style="padding-right: 30rpx;">
					<!-- <image class="wh-44" src="../../static/common/ic_sort.png"></image> -->
					<image class="wh-44 mr-28" v-if="index == bedList.length - 1"
					 src="../../static/common/ic_down_grey.png"></image>
					<image class="wh-44 mr-28" v-else @click="sortGoDown(index)"
					  src="../../static/common/ic_down_black.png"></image>
					<image class="wh-44" src="../../static/common/ic_up_grey.png" v-if="index == 0"></image>
					<image class="wh-44" src="../../static/common/ic_up_black.png" v-else
					@click="sortGoUp(index)"></image>
				</view>
				<view class="divider-1 ml-30" style="position: absolute;bottom: 0;"></view>
			</view>
		</view>
		
		<view class="column-container-row-center width-100p" v-show="bedList.length < 1">
			<image class="empty-ic" src="../../static/common/ic_no_client.png"></image>
			<text class="font-333-28">暂无数据，快去添加设备/人员吧</text>
		</view>
		
		<view class="bottom-box" @click="showAddBedWindow = true">
			<text class="red-btn mt-16">+ 添加设备/人员</text>
		</view>
		
		<!-- 添加设备弹窗 -->
		<view class="window-main" v-if="showAddBedWindow">
			<view class="add-bed-window">
				<text class="font-333-36 font-weight-600">{{editBedId ? '修改设备/人员' : '添加设备/人员'}}</text>
				
				<view class="row-container mt-40 width-100p">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">类型</text>
				</view>
				
				<view class="row-container width-100p mt-14">
					<text class="chosen-type" v-if="addType == 0">店员</text>
					<text class="default-type" v-else @click="changeAddType(0)">店员</text>
					
					<text class="chosen-type" v-if="addType == 1">设备</text>
					<text class="default-type" v-else @click="changeAddType(1)">设备</text>
				</view>
				
				<view class="row-container mt-20 width-100p" v-if="addType == 0">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">关联店员</text>
				</view>
				
				<picker mode="selector" :range="allEmployeeList" range-key="userName"
				class="width-100p" @change="changeStaff" v-model="staffParams.staffId"  
				v-if="addType == 0">
					<view class="row-container-row-between add-bed-input">
						<text class="font-999-28" v-if="!staffName">请选择关联的店员</text>
						<text class="font-333-28" v-if="staffName">{{staffName}}</text>
						<image class="wh-20" src="../../static/common/ic_arrow_right.png"></image>
					</view>
				</picker>
				<view class="row-container mt-40 width-100p">
					<text class="font-f94-28">*</text>
					<text class="font-333-28" v-if="addType == 0">店员名称</text>
					<text class="font-333-28" v-if="addType == 1">设备名称</text>
				</view>
				<input
					v-model="staffParams.deviceName"
					class="add-bed-input"
					placeholder="请输入店员名称"
					placeholder-class="font-999-32"
					maxlength="10"
					v-if="addType == 0"
				/>
				<input
					v-model="deviceParams.deviceName"
					class="add-bed-input"
					placeholder="请输入设备名称"
					placeholder-class="font-999-32"
					maxlength="10"
					v-if="addType == 1"
				/>
				<text class="font-f94-26 width-100p">*请勿输入相同名称的设备/人员</text>
				
				<view class="row-container-row-between width-100p mt-40">
					<text class="add-cancel" @click="handleCloseAddWindow">取消</text>
					<text class="add-confirm" @click="handleAddBed"
					v-if="(addType == 0 && staffParams.staffId && staffParams.deviceName) 
					|| (addType != 0 && deviceParams.deviceName)">确定</text>
					<text class="add-confirm-negative" v-else>确定</text>
				</view>
			</view>
		</view>
		
		<!-- 停用启用确认弹窗 -->
		<view class="window-main" v-show="showOpenWindow">
			<view class="reset-window">
				<text class="font-333-36 font-weight-600">{{clickOpenData.status == 0 ? '确认停用吗？' : '确认启用吗？'}}</text>
				<view class="row-container mt-40 width-100p">
					<text class="cancel-btn" @click="showOpenWindow = false">取消</text>
					<text class="confirm-btn" @click="changeIsOpen">确定</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showAddBedWindow:false,
				addType:0, // 0店员  1设备
				staffName:'' , // 关联的店员名称
				
				bedList:[],
				showDeleteWindow:false,
				deleteBedData:null,
				
				itemHeight: 120,
				showOpenWindow:false ,
				clickOpenData:null , // 点击启用或者停用的item
				
				editBedId:'' , // 点击编辑的id
				allEmployeeList:[] , // 全部员工列表
				
				deviceParams:{
					deviceId:'',
					deviceName:'',
				} , // 添加或修改  设备类型
				
				staffParams:{
					deviceId:'',
					deviceName:'',
					staffId:'' , // 关联的员工id
				}
			}
		},
		
		components:{
		},
		
		onLoad() {
			this.loadAllEmployee()
			this.loadBedList()
		},
		
		methods: {
			loadAllEmployee(){
				let that = this
				this.http({
					url:'/user/staffList',
					method:'POST',
					data:{
						pageNo: 1,
						pageSize: 1000,
						status:1
					},
					success(res){
						if (res.code == 200){
							that.allEmployeeList = res.data
						}
					},
					failed(e){
					}
				})
			},
			
			updateBedList(evt){
				let newOrder = this.$refs.bedListRef.children.toArray().map((el, index) => index);
				console.log('updateBedList---' , evt)
			},
			
			loadBedList(){
				let that = this
				this.http({
					url:'/user/device/findListForDevice',
					method:'POST',
					data:{
						pageNo: 1,
						pageSize: 1000
					},
					success(res){
						if (res.code == 200){
							that.bedList = res.data
						}
					},
					failed(e){
					}
				})
			},
			
			handleCloseAddWindow(){
				this.editBedId = ""
				this.staffName = ""
				
				this.staffParams.deviceId = ""
				this.staffParams.deviceName = ""
				this.staffParams.staffId = ""
				
				this.deviceParams.deviceId = ""
				this.deviceParams.deviceName = ""
				
				this.showAddBedWindow = false
			},
			
			handleAddBed(){
				if (this.addType == 0 && (!this.staffParams.staffId || !this.staffParams.deviceName)){
					return
				} else if (this.addType == 1 && !this.deviceParams.deviceName){
					return
				}
				
				let that = this
				
				let params = {}
				if (this.addType == 0){
					params = this.staffParams
				} else if (this.addType == 1){
					params = this.deviceParams
				}
				this.$set(params , 'type' , this.addType)
				
				this.http({
					url:"/user/device/saveOrUpdateDevice",
					method:"POST",
					data:params,
					// data:{
					// 	deviceName : this.addBedName,
					// 	deviceId : this.editBedId,
					// 	type : this.addType,
					// 	staffId : this.staffId ? this.staffId : ''
					// },
					success(data){
						if (data.code == 200){
							that.addType = 0
							that.handleCloseAddWindow()
							that.loadBedList()
							uni.$emit("refreshIndexData")
							uni.$emit("refreshBedList")
						}
						setTimeout(()=>{
							uni.showToast({
								title:data.msg,
								icon:'none'
							})
						},500)
					},
					failed(e){
						
					}
				})
			},
			
			//修改排序
			changeBedList(list){
				let idArray = []
				list.forEach((item)=>{
					idArray.push(item.id)
				})
				let ids = idArray.join(',')
				
				let that = this
				this.http({
					url:"/user/device/sort",
					method:"POST",
					data:{
						deviceIds : ids
					},
					success(data){
						if (data.code == 200){
							that.loadBedList()
							uni.$emit('refreshIndexData')
							uni.$emit('refreshBedList')
						}
					},
					failed(e){
						
					}
				})
			},
			
			handleClickIsOpen(item){
				this.clickOpenData = item
				this.showOpenWindow = true
			},
			
			//修改启用状态  
			changeIsOpen(){
				if (!this.clickOpenData) return
				let that = this
				let type = 0
				if (this.clickOpenData.status == 0){
					type = 1
				}
				this.http({
					url:"/user/device/deleteDevice",
					method:"POST",
					data:{
						deviceId : this.clickOpenData.id,
						type : type
					},
					success(data){
						if (data.code == 200){
							that.clickOpenData = null
							that.showOpenWindow = false
							that.loadBedList()
							uni.$emit("refreshIndexData")
							uni.$emit("refreshBedList")
						}
					},
					failed(e){
						
					}
				})
			},
			
			//点击编辑
			clickEditItem(item){
				this.addType = item.type
				this.editBedId = item.id
				
				this.staffParams.deviceId = item.id
				this.deviceParams.deviceId = item.id
				
				if (this.addType == 0){
					this.staffParams.staffId = item.staffId
					this.staffParams.deviceName = item.name
				} else if (this.addType == 1){
					this.deviceParams.deviceName = item.name
				}
				 
				this.allEmployeeList.find((eItem)=>{
					if (item.staffId == eItem.id){
						this.staffName = eItem.userName
					}
				})
				this.showAddBedWindow = true
			},
			
			//修改关联的店员
			changeStaff(e){
				this.staffParams.staffId = this.allEmployeeList[e.detail.value].id
				this.staffParams.deviceName = this.allEmployeeList[e.detail.value].userName
				this.staffName = this.allEmployeeList[e.detail.value].userName
			},
			
			//修改类型
			changeAddType(type){
				this.addType = type
			},
			
			//排序向下
			sortGoDown(index){
				if (index < this.bedList.length - 1) {
					// 交换当前元素与前一个元素的位置
					[this.bedList[index + 1], this.bedList[index]] = [this.bedList[index], this.bedList[index + 1]];
				}
				this.changeBedList(this.bedList)
			},
			
			//排序向上
			sortGoUp(index){
				if (index > 0) {
					// 交换当前元素与前一个元素的位置
					[this.bedList[index], this.bedList[index - 1]] = [this.bedList[index - 1], this.bedList[index]];
				}
				this.changeBedList(this.bedList)
			}
			
			
		}
	}
</script>

<style lang="scss">
	.header-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 80rpx;
	}
	
	.header-item-grow{
		flex-grow: 1;
		text-align: center;
	}
	
	.bed-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 120rpx;
		background: white;
		position: relative;
		
		.switch-ic{
			width: 79rpx;
			height: 45rpx;
		}
	}
	
	.bottom-box{
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		height: 180rpx;
		background: white;
		position: fixed;
		bottom: 0;
		z-index: 100;
	}
	
	.add-bed-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 218rpx);
		margin: 0rpx 69rpx;
		padding: 40rpx;
		background: white;
		border-radius: 30rpx;
		
		.add-bed-input{
			width: calc(100% - 48rpx);
			height: 87rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin-top: 14rpx;
			margin-bottom: 8rpx;
			padding: 0rpx 24rpx;
			color: #333333;
			font-size: 28rpx;
		}
		
		.add-cancel{
			width: 200rpx;
			height: 85rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin-right: 30rpx;
			text-align: center;
			line-height: 85rpx;
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
		}
		
		.add-confirm{
			flex-grow: 1;
			height: 85rpx;
			border-radius: 10rpx;
			background: #F94C4B;
			text-align: center;
			line-height: 85rpx;
			color: white;
			font-size: 32rpx;
			font-weight: 600;
		}
		
		.add-confirm-negative{
			flex-grow: 1;
			height: 85rpx;
			border-radius: 10rpx;
			background: #F94C4B;
			text-align: center;
			line-height: 85rpx;
			color: white;
			font-size: 32rpx;
			font-weight: 600;
			opacity: 0.5;
		}
		
		.default-type{
			flex-grow: 1;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			background: #f5f5f5;
			border-radius: 10rpx;
			color: #333333;
			font-size: 28rpx;
		}
		
		.chosen-type{
			flex-grow: 1;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			background: #F94C4B;
			border-radius: 10rpx;
			color: white;
			font-size: 28rpx;
		}
		
	}
	
	.empty-ic{
		width: 230rpx;
		height: 230rpx;
		margin-top: 411rpx;
		margin-bottom: 20rpx;
	}
	
	.reset-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 190rpx);
		margin: 0rpx 70rpx;
		padding: 40rpx 25rpx;
		background: white;
		border-radius: 30rpx;
		
		.cancel-btn{
			height: 85rpx;
			flex-grow: 1;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin: 0rpx 15rpx;
			color: #333333;
			font-size: 32rpx;
			text-align: center;
			line-height: 85rpx;
		}
		
		.confirm-btn{
			height: 85rpx;
			flex-grow: 1;
			background: #F94C4B;
			border-radius: 10rpx;
			margin: 0rpx 15rpx;
			color: white;
			font-size: 32rpx;
			text-align: center;
			line-height: 85rpx;
		}
	}
	
</style>
